<template>
  <div>
    <h1>This is an nexttick page</h1>
    <ul ref="ul1">
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <button @click="addItem">添加一个</button>
  </div>
</template>

<script>
export default {
  name: "nexttick",
  data() {
    return {
      list: ["a", "b", "c"]
    };
  },
  methods: {
    addItem() {
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      //获取dom
      const ulElem = this.$refs.ul1;
      console.log(ulElem.childNodes);
      console.log("nextTick调用前", ulElem.childNodes.length);

      //异步渲染 nextTick在dom渲染完之后再调用,
      // 页面渲染对data的修改整合, 只渲染一次
      this.$nextTick(() => {
        //获取dom
        const ulElem2 = this.$refs.ul1;

        console.log("nextTick调用前后", ulElem2.childNodes.length);
      });
    }
  }
};
</script>